<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>【阿丁社区】</title>
    <link rel="stylesheet" href="./js/bootstrap-3.4.1-dist/css/bootstrap.css">
    <link rel="stylesheet" href="./js/swiper/swiper-4.1.0.min.css">
    <link rel="stylesheet" href="./css/flex-box.css">
    <link rel="stylesheet" href="./css/common.css">
    <link rel="stylesheet" href="./css/index.css">
    <style>
        .el-carousel__item h3 {
            color: #475669;
            font-size: 14px;
            opacity: 0.75;
            line-height: 200px;
            margin: 0;
        }

        .el-carousel__container {
            position: relative;
            height: 261px !important;
        }

        .el-carousel__item:nth-child(2n) {
            background-color: #99a9bf;
        }

        .el-carousel__item:nth-child(2n+1) {
            background-color: #d3dce6;
        }
    </style>
</head>

<body>
<div id="app">

    <div class="header">
        <div class="nav">
            <div class="nav-bar">
                <div class="nav-left">
                    <ul>
                        <li>
                            <a href="">关于我们</a>
                        </li>
                        <li><a href="">新闻</a></li>
                        <li><a href="">赞助方</a></li>
                        <li><a href="">会员</a></li>
                        <li><a href="">企业购</a></li>
                    </ul>
                </div>
                <div class="nav-right">
                    <ul>
                        <li><a href="/browser/page/register.html" v-if="!username">注册</a></li>
                        <li><a style="color: #FE8C00" @click="login()" v-if="!username">立即登录</a></li>
                        <li><span style="color: #FE8C00;left:23px;position: relative" @click="loginOut()"
                                  v-if="username">{{username}}</span></li>
                        <li><a v-if="username" @click="loginout()">退出</a></li>
                        <li><a>我的订单</a></li>
                        <!--   <li>
                               <a class="shop-car"><img src="./image/index-img/购物车.png">购物车(0)</a>
                               <div class="car-down flex-col j-c a-c" hidden="hidden">
                               <span>
                                   <img src="./image/index-img/购物车 (1).png" alt="">
                               </span>
                                   <p>您的购物车是空的，赶紧选购吧~</p>
                               </div>
                           </li>-->
                        <li>
                            <a class="mobile">手机端<img src="./image/index-img/下拉.png"></a>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
        <div class="layout">
            <div class="layout-in">
                <div class="left">
                    <div class="logo">
                        <h1>阿丁社区</h1>
                    </div>
                    <div class="classify">
                        <a>生活选区<img src="./image/index-img/下拉.png"></a>
                    </div>
                </div>
                <div class="right">
                </div>
            </div>
            <div class="classify-down flex-row j-c">
                <ul>
                    <li><a class="item active">校内点餐</a></li>
                    <li><a class="item" @click="getMovie()">猫眼电影</a></li>
                    <li><a class="item" @click="openFood()">社区点评</a></li>
                    <li><a class="item">阿丁娱乐</a></li>
                    <li><a class="item">代取快递</a></li>
                    <li><a class="item">体质测试</a></li>
                    <li><a class="item">代写情书</a></li>
                    <li><a class="item">找人帮忙</a></li>
                </ul>
            </div>
        </div>
    </div>

    <div class="containers">
        <template>
            <el-carousel :interval="4000" type="card" style="width: 80%;height: 288px;margin-left: 10%;">
                <!--@click.native绑定原生事件-->
                <el-carousel-item v-for="(item,index) in items" :key="item" @click.native="getClick(item,index)">
                    <h3 class="medium"><img :src="item" alt="" style="max-width: 100%;max-height: 100%;"></h3>
                </el-carousel-item>
            </el-carousel>
        </template>
        <!--     <div class="giant-screen">
                &lt;!&ndash;  轮播图 &ndash;&gt;
                 <div class="swiper">
                     <div class="swiper-wrapper">
                         <div class="swiper-slide clearfix">
                             <img style="max-height: 100%;max-width: 100%" src="./images/bac1.jpg" alt=""
                                  @click="getMovie()">
                         </div>
                         <div class="swiper-slide clearfix">
                             <img style="max-height: 100%;max-width: 100%" src="./images/bac2.jpg" alt="" @click="">
                         </div>
                         <div class="swiper-slide clearfix">
                             <img style="max-height: 100%;max-width: 100%" src="./images/bac3.jpg" alt=""
                                  @click="openFood()">
                         </div>
                     </div>
                     &lt;!&ndash; 如果需要分页器 &ndash;&gt;
                     <div class="swiper-pagination"></div>
                 </div>
             </div>-->
        <div id="main">
            <div class="channel flex-row j-s-a"></div>
            <div class="content1">
                <div>
                    <span id="title">生活服务</span>
                </div>
                <div class="list flex-row j-s-a">
                    <div class="col-6 list-item ">
                        <img src="./image/food.png" alt="" @click="openFood()">
                    </div>
                    <div class="col-6 list-item" style="margin-left: 20px">
                        <img src="./image/movie.png" alt="" @click="getMovie()">
                    </div>
                </div>
            </div>

            <div class="content2">
                <div>
                    <span id="title">猫眼电影</span>
                </div>
                <div class="list flex-row j-s-a">
                    <div class="flex-col a-c list-item">
                        <div class="grid-img">
                            <img src="./page/cat/img/1.jpg" alt="">
                        </div>
                        <div class="grid-title">购票</div>
                    </div>
                    <div class="flex-col a-c list-item">
                        <div class="grid-img">
                            <img src="./page/cat/img/2.jpg" alt="">
                        </div>
                        <div class="grid-title">购票</div>
                    </div>
                    <div class="flex-col a-c list-item">
                        <div class="grid-img">
                            <img src="./page/cat/img/3.jpg" alt="">
                        </div>
                        <div class="grid-title">购票</div>
                    </div>
                    <div class="flex-col a-c list-item">
                        <div class="grid-img">
                            <img src="./page/cat/img/4.jpg" alt="">
                        </div>
                        <div class="grid-title">购票</div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="footer">
        <div class="foot-one">
        </div>
        <div class="foot-two">
            <ul class="flex-row j-s-b">
                <li>
                    <p>推荐</p>
                    <ul>
                        <li><a href="">电影专区</a></li>
                        <li><a href="">外卖专区</a></li>
                        <li><a href="">餐评专区</a></li>
                    </ul>
                </li>
                <li>
                    <p>品牌</p>
                    <ul>
                        <li><a href="">关于阿丁</a></li>
                        <li><a href="">新闻</a></li>
                        <li><a href="">活动</a></li>
                        <li><a href="">视频</a></li>
                    </ul>
                </li>
                <li>
                    <p>阿丁服务</p>
                    <ul>
                        <li><a href="">阿丁送</a></li>
                        <li><a href="">阿丁点评</a></li>
                        <li><a href="">猫眼电影</a></li>
                        <li><a href="">支付方式</a></li>
                        <li><a href="">常见问题</a></li>
                    </ul>
                </li>
                <li>
                    <p>合作招募</p>
                    <ul>
                        <li><a href="">阿丁外卖合作商招募</a></li>
                        <li><a href="">到店餐饮招募</a></li>
                        <li><a href="">阿丁联盟</a></li>
                        <li><a href="">规则中心</a></li>
                        <li><a href="">规则目录</a></li>
                    </ul>
                </li>
                <li>
                    <p>关注阿丁</p>
                    <ul>
                        <li><a href="">阿丁联系Wechat</a></li>
                    </ul>
                </li>
                <li style="width: 240px;">
                    <p>商城服务热线</p>
                    <ul>
                        <li style="font-size: 24px;font-weight: bold;">139-9591-0596</li>
                        <li>
                            <button class="flex-row j-c">
                                <img src="./image/index-img/在线客服.png" style="width: 20px; margin-top: 5px;">
                                <p>在线客服</p>
                            </button>
                        </li>
                    </ul>
                </li>
            </ul>
        </div>
        <div class="foot-three">
            <ul class="flex-col">
            </ul>
        </div>
    </div>

</div>
</body>
<script src="./js/jQuery.js"></script>
<script src="./js/swiper/swiper-4.1.0.min.js"></script>
<script src="./js/index.js"></script>
<script src="./js/vue.js"></script>
<script src="./plugins/axios.min.js"></script>
<script src="./js/request.js"></script>
<script src="./api/login.js"></script>
<script src="./plugins/element-ui/lib/index.js"></script>
<link rel="stylesheet" href="./plugins/element-ui/lib/theme-chalk/index.css">

<script>
    new Vue({
        el: "#app",
        data() {
            return {
                username: '',
                items: ['./images/bac1.jpg', './images/bac2.jpg', './images/bac3.jpg'],
            }
        },
        created() {
            const userName = window.localStorage.getItem('user')
            if (userName) {
                this.username = JSON.parse(userName).name
            }
            /*    alert(this.username)*/
        },
        methods: {
            /*登录*/
            login() {
                window.location.href = "/browser/page/login.html"
            },
            /*退出登录*/
            loginout() {
                loginoutApi().then(res => {
                    if (res.code === 1) {
                        localStorage.removeItem('user')
                        window.location.href = '/browser/index.html'
                    }
                })
            },
            /*跳转到阿丁餐评页面*/
            openFood() {
                if (localStorage.getItem('user') === null) {
                    window.location.href = "/browser/page/login.html"
                } else {
                    window.open("/browser/page/foodMark/listShopping.html")
                }
            },
            /*跳转到猫眼电影*/
            getMovie() {
                window.open("/browser/page/cat/CatEyes.html")
            },
            getClick(item, index) {
                switch (index) {
                    case 0:
                        this.getMovie()
                        break;
                    case 1:
                        this.$notify({type:'success',message:'请下载APP'})
                        break;
                    case 2:
                        this.openFood()
                        break
                }
            }
        },

    })
</script>

</html>